import React from 'react'
import { Swiper, Grid } from 'react-vant';
import MyIcon from '@/components/myIcon'// 抛出第一页的图标
import s from './style.module.less'

// import { IconArray } from '../../../../utils/index'

export default function More() {

  const IconArray = [
    {
      icon: <MyIcon name="icon-dingwei" />,
      name: '地图找房'
    },
    {
      icon: <MyIcon name="icon-jisuan" />,
      name: '房贷计算'
    },
    {
      icon: <MyIcon name="icon-haofangtuo400iconfonthaofangtuo" />,
      name: '必看好房'
    },
    {
      icon: <MyIcon name="icon-zuixinfangyuan" />,
      name: '新上房源'
    },
    {
      icon: <MyIcon name="icon-jingjiren" />,
      name: '找经纪人'
    },
    {
      icon: <MyIcon name="icon-xiaoqu-xianxing" />,
      name: '找小区'
    },
    {
      icon: <MyIcon name="icon-26" />,
      name: '商铺办公'
    },
    {
      icon: <MyIcon name="icon-gongyuguanli" />,
      name: '租公寓'
    },
    {
      icon: <MyIcon name="icon-yugushouru" />,
      name: '房屋估价'
    },
    {
      icon: <MyIcon name="icon-woyaomaifang" />,
      name: '卖房'
    },
  ]
  const IconArrayS = [
    {
      icon: <MyIcon name="icon-rukuliucheng" />,
      name: '买卖流程'
    },
    {
      icon: <MyIcon name="icon-zhishi" />,
      name: '购房知识'
    },
    {
      icon: <MyIcon name="icon-ziyuan" />,
      name: '在售好盘'
    },
    {
      icon: <MyIcon name="icon-zhibo" />,
      name: '直播看房'
    },
    {
      icon: <MyIcon name="icon-banjiayunshu" />,
      name: '搬家'
    },
    {
      icon: <MyIcon name="icon-loupanzixun" />,
      name: '最近开盘'
    },
    {
      icon: <MyIcon name="icon-yuechi" />,
      name: '我要出租'
    },
    {
      icon: <MyIcon name="icon-VR" />,
      name: 'VR看房'
    },
    {
      icon: <MyIcon name="icon-mendian" />,
      name: '找门店'
    },
    {
      icon: <MyIcon name="icon-naozhong" />,
      name: '随时看房'
    },
    // {
    //   icon: <MyIcon name="icon-pinpai" />,
    //   name: '品牌房企'
    // },
  ]
  return (
    <div className={s.main}>
      <Swiper>
        <Swiper.Item>
          <Grid square columnNum='5'>
            {Array.from(IconArray, (_, i) => (
              <Grid.Item key={i} icon={IconArray[i].icon} text={IconArray[i].name} />
            ))}
          </Grid>
        </Swiper.Item>

        <Swiper.Item>
          <Grid square columnNum='5'>
            {Array.from(IconArrayS, (_, i) => (
              <Grid.Item key={i} icon={IconArrayS[i].icon} text={IconArrayS[i].name} />
            ))}
          </Grid>
        </Swiper.Item>
      </Swiper>
      <div className={s.botton}>
        <div className={s.box}>
          <div className={s.safe}>
            <MyIcon name="icon-anquan" />
            <div className={s.recommand}>安心承诺</div>
            <div className={s.safeWords}>真实房源·资金安全·安心入住</div>
          </div>
          <div className={s.arrow}></div>
        </div>
      </div>
    </div>
  )
}
